<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1{
				width: 100px;
				height: 100px;
				position: absolute;
				background-color: aqua;
				left: 0px;  /* 因为有些浏览器不是0px 还有可能是auto呢 可以使它贴边*/ 
			}
		</style>
		<script type="text/javascript">
			//获取某个元素的样式的方法
			window.onload=function()
			{
				function getStyle(obj,name)
				{
					if(window.getComputedStyle)
					{
						return getComputedStyle(obj,null)[name];
					}
					else
					{
						return obj.currentStyle[name];
					}
				}
				var timer;
				var box1=document.getElementById("box1");
				var btn01=document.getElementById("btn01");
				  //解决点多加速问题
				btn01.onclick=function()
				{
					clearInterval(timer);
					 timer=setInterval(function()
					{   
						var oldValue=parseInt(getStyle(box1,"left"));
						var newValue=oldValue+1;
						if(newValue>800)
						{
							newValue=800;
						}
						box1.style.left=newValue+"px";
						if(newValue==800)
						{
							clearInterval(timer);
						}
					},3)
					
				}
				//alert(getStyle(box1,"left")); //为什么是left而不是offsetLeft
			}
			
		</script>
	</head>
	<body>
		<div id="box1"></div>
		<br><br><br><br><br><br><br><br>
		<button id="btn01">点击按钮div向右</button>
		<div style="width: 0;height: 1000px; border-left: 1px black solid; top: 0px; left: 800px; position: absolute;"></div>
		<!-- 设置一条线，border-left边框的左 -->
	</body>
</html>